import { Button, Radio, Space, Table } from 'antd';
import { useState, useEffect, useContext } from 'react'
import LittleTitle from '../../../../../../common/LittleTitle';
import _ from 'lodash';
import XqDetail from '../XqDetail';
import DtfxfxContext from '../../DtfxfxContext';
import rangeDisplayIcon from '../../../Jcyj/rangeDisplayIcon';
import useBusinessMap from '../../../../../../common/BusinessMap/useBusinessMap';

export default function ZhyxzhfxResult(props) {
    const { result, getType, onCztxlupdate, onJzzyxlupdate, onWkt, onYhdupdate } = props;

    const map = useBusinessMap();
    const { setXlName } = useContext(DtfxfxContext)

    const [type, setType] = useState('czt');
    getType(type);//回调给Dtfxfx

    const handleClickCzt = (record) => {
        
        const cztxl = record?.cztxl;
        const wkt = result?.newWkt;
        onCztxlupdate(cztxl);
        onWkt(wkt);

    }
    const handleClickJzzy = (record) => {
        const jzzyxl = record?.jzzyxl;
        const wkt = result?.newWkt;
        onJzzyxlupdate(jzzyxl);
        onWkt(wkt)
    }
    const handleClickYhd = () => {
        const yhmc = result?.data?.yhd.map(item => item?.yhmc)
        onYhdupdate(yhmc);
    }
    /* 
    --下面这个钩子函数用于范围内各种'承灾体'、'减灾资源'在地图是显示，与'监测预警'使用同函数，函数在'监测预警'文件夹下，监测点、预警信息、隐患点数据暂无
    --rangeDisplayIcon(data, circle, map, ypType);
    --↓
    */
   console.log('reslute',result)
    useEffect(() => {
        //console.log("9",result,type)
        let data, circle = result.newWkt, ypType = type;
        // console.log('result',result)
        if (type === 'czt') {
            data = result?.data?.czt?.map(e => ({ name: e.cztxl }));
            if (data) {
                rangeDisplayIcon(data, circle, map, ypType, 'nowkt');
            }
        } else if (type === 'jzzyzh') {
            data = result?.data?.jzzy?.map(e => ({ name: e.jzzyxl }));
            if (data) {
                rangeDisplayIcon(data, circle, map, ypType, 'nowkt');
            }

        } else if (type === 'jcd') {
            //
        } else if (type === 'yjxx') {
            //
        } else if (type === 'yhd') {
            //
            data=result?.data?.yhd.map(item=>({name:item?.yhlx}));
            if(data){
                rangeDisplayIcon(data,circle,map,ypType,'nowkt')
            }
        }
        //console.log("10",data)

        return () => {
            const allLayers = map.getLayers().getArray();
            [...allLayers].forEach(l => {
                if (l?.get("layerName") === 'rangeDisplayIcon')
                    map.removeLayer(l);
            })
        }
    }, [result, type, map])
    /* 
    --↑
    */

    return <div style={{
        padding: "0 12px"
    }}>
        {/* <Radio.Group>
            <Radio.Button>承灾体</Radio.Button>
            <Radio.Button>减灾资源</Radio.Button>
        </Radio.Group> */}
        <LittleTitle>分析概要</LittleTitle>
        <div style={{
            margin: "8px 0 16px 0"
        }}>
            <div style={{
                // textAlign: "center"  
            }}>
                该区域共有承灾体
                <span style={{
                    fontWeight: "bold",
                    color: '#f50',
                    padding: "0 3px"
                }}>{_.sumBy(result.data?.czt, 'count')}</span>
                处
            </div>
            <div style={{
                // textAlign: "center"  
            }}>
                该区域共有减灾资源
                <span style={{
                    fontWeight: "bold",
                    color: '#f50',
                    padding: "0 3px"
                }}>{_.sumBy(result.data?.jzzy, 'count')}</span>
                处
            </div>
            <div style={{
                // textAlign: "center"  
            }}>
                该区域共有监测点
                <span style={{
                    fontWeight: "bold",
                    color: '#f50',
                    padding: "0 3px"
                }}>
                    {/* {_.sumBy(result.data?.jzzy, 'count')} */}
                </span>
                处
            </div>
            <div style={{
                // textAlign: "center"  
            }}>
                该区域共有预警信息
                <span style={{
                    fontWeight: "bold",
                    color: '#f50',
                    padding: "0 3px"
                }}>
                    {/* {_.sumBy(result.data?.jzzy, 'count')} */}
                </span>
                条
            </div>
        </div>

        <LittleTitle>结果详情</LittleTitle>
        <Space direction='vertical' style={{
            marginTop: 8,
            width: '100%'
        }}>
            <Radio.Group size="small" buttonStyle="solid" value={type} onChange={e => {
                setType(e.target.value)
                /* 
                --rangeDisplayIcon(resp.data, circle, map, ypType);
                --return () => {
                    const allLayers = map.getLayers().getArray();
                    [...allLayers].forEach(l => {
                        if (l?.get("layerName") === 'rangeDisplayIcon')
                            map.removeLayer(l);
                    })
                    }
                --import rangeDisplayIcon from '../../rangeDisplayIcon';
                */
                //console.log("9", result)
                /* 
                --
                */
            }}>
                <Radio.Button value='czt'>承灾体</Radio.Button>zh
                <Radio.Button value='jzzyzh'>减灾资源</Radio.Button>zh
                <Radio.Button value='jcd'>监测点</Radio.Button>
                <Radio.Button value='yjxx'>预警信息</Radio.Button>
                <Radio.Button value='yhd'>隐患点</Radio.Button>
            </Radio.Group>
            {type === 'jzzyzh' && <Table bordered size="small" dataSource={result?.data?.jzzy} columns={[{
                dataIndex: 'jzzyxl',
                title: '类型',
                width:160,
                ellipsis:true,
            }, {
                title: '数量',
                dataIndex: 'count',
                align:'center'
            }, {
                width: 80,
                align: "center",
                render: (record) => {
                    return <Button type="link" size="small" onClick={()=>handleClickJzzy(record)}>详情</Button>
                }
            }]} pagination={{
                pageSize: 10
            }} />}
            {type === 'czt' && <Table bordered size="small" dataSource={result?.data?.czt} columns={[{
                dataIndex: 'cztxl',
                title: '类型',
                width:160,
                ellipsis:true
            }, {
                title: '数量',
                dataIndex: 'count',
                align:'center'
            }, {
                width: 80,
                align: "center",
                render: (record) => {
                    return <Button type="link" size="small" onClick={()=>handleClickCzt(record)}>详情</Button>
                }
            }]} pagination={{
                pageSize: 10
            }} />}
            {
                type === 'jcd' && <Table bordered size='small' columns={[{
                    dataIndex: 'title',
                    title: '名称'
                },
                {
                    dataIndex: 'count',
                    title: '数量'
                }, {
                    width: 80,
                    align: 'center',
                    render: (record) => {
                        return <Button typ='link' size='small' pagination={{ pageSize: 10 }}>详情</Button>
                    }
                }]} />
            }
            {
                type === 'yjxx' && <Table bordered size='small' columns={[{
                    dataIndex: 'title',
                    title: '名称'
                },
                {
                    dataIndex: 'count',
                    title: '数量'
                }, {
                    width: 80,
                    align: 'center',
                    render: (record) => {
                        return <Button type='link' size='small' pagination={{ pageSize: 10 }}>详情</Button>
                    }
                }]} />
            }
            {
                type === 'yhd' && <Table bordered size='small' columns={[{
                    title: '隐患点名称',
                    dataIndex: 'yhmc',
                    ellipsis: true
                },
                    // {
                    //     width:80,
                    //     align:'center',
                    //     render:(record)=>{
                    //         return <Button type='link' size='small' onClick={handleClickYhd}>详情</Button>
                    //     }
                    // }
                ]}
                    dataSource={result?.data?.yhd}
                />
            }
        </Space>
    </div>;
}